<template>
  <div class="grafana-embed-container">
    <div v-if="isLoading" class="loading-mask">
      <div class="loading-text">加载Grafana监控面板中...</div>
    </div>

    <iframe
      :src="grafanaFullUrl"
      class="grafana-iframe"
      frameborder="0"
      @load="handleIframeLoad"
      @error="handleIframeError"
    ></iframe>

    <div v-if="hasError" class="error-message">
      <i class="icon-error"></i>
      <p>监控面板加载失败，请检查Grafana地址或网络连接</p>
      <button @click="reloadIframe">重试</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GrafanaEmbed',
  props: {
    baseUrl: {
      type: String,
      required: false,
      default: null
    },
    timeRange: {
      type: String,
      default: 'from=now-1h&to=now'
    },
    hideNavbar: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isLoading: true,
      hasError: false
    }
  },
  computed: {
    effectiveBaseUrl() {
      return this.baseUrl || import.meta.env.VITE_GRAFANA_URL || 'http://192.168.242.145:3000/d/node-exporter-full';
    },
    grafanaFullUrl() {
      const params = new URLSearchParams();
      if (this.timeRange) {
        const [from, to] = this.timeRange.split('&');
        params.append(from.split('=')[0], from.split('=')[1]);
        params.append(to.split('=')[0], to.split('=')[1]);
      }
      if (this.hideNavbar) {
        params.append('kiosk', 'tv');
      }
      return `${this.effectiveBaseUrl}?${params.toString()}`;
    }
  },
  methods: {
    handleIframeLoad() {
      this.isLoading = false;
      this.hasError = false;
    },
    handleIframeError() {
      this.isLoading = false;
      this.hasError = true;
    },
    reloadIframe() {
      this.isLoading = true;
      this.hasError = false;
      const iframe = this.$el.querySelector('.grafana-iframe');
      iframe.src = this.grafanaFullUrl;
    }
  }
};
</script>

<style scoped>
.grafana-embed-container {
  width: 100%;
  min-height: 600px;
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}

.grafana-iframe {
  width: 100%;
  height: 100%;
  min-height: 600px;
}

.loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.loading-text {
  color: #374151;
  font-size: 14px;
  padding: 10px 20px;
  background-color: #f3f4f6;
  border-radius: 4px;
}

.error-message {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fef2f2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #dc2626;
  padding: 20px;
  text-align: center;
  z-index: 10;
}

.icon-error {
  font-size: 24px;
  margin-bottom: 10px;
}

.error-message button {
  margin-top: 15px;
  padding: 6px 12px;
  background-color: #ef4444;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.error-message button:hover {
  background-color: #dc2626;
}
</style>